<template>
    <div style="min-height: 500px; justify-content: center;position: relative" id="map" />
    <el-dialog v-model="dialogVisible" title="添加实验室">
        <el-form ref="addFormRef" :model="addForm" :rules="rules" class="demo-ruleForm" status-icon>
            <el-form-item label="实验室名称" prop="title">
                <el-input v-model="addForm.title" />
            </el-form-item>
            <el-form-item label="容纳人数" prop="capacity">
                <el-input v-model="addForm.capacity" type="number" />
            </el-form-item>

            <el-form-item label="实验室类型" prop="labType">
                <el-select v-model="addForm.labType" class="m-2" placeholder="请选择实验室类型" size="large">
                    <el-option v-for="item in LabType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>

            <el-form-item label="学院" prop="collegeType">
                <el-select v-model="addForm.collegeType" class="m-2" placeholder="请选择学院" size="large">
                    <el-option v-for="item in CollegeType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>

            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAddConfirm()">
                    确定
                </el-button>
            </div>
        </el-form>
    </el-dialog>
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue';
import { Scene, ImageLayer, PointLayer, Popup } from '@antv/l7';
import { Map } from '@antv/l7-maps';
import { LabType, CollegeType } from '../../util/type'
import axios from 'axios';
import { url } from '../../util/urlconfig'
import { ElMessage } from 'element-plus'
let scene, popup;
onMounted(() => {
    scene = new Scene({
        id: 'map',
        map: new Map({
            center: [500, 500],
            zoom: 3,
            version: 'SIMPLE',
            mapSize: 1000,
            maxZoom: 5,
            minZoom: 2,
            pitchEnabled: false,
            rotateEnabled: false
        })
    });
    scene.setBgColor('rgb(94, 182, 140)');

    const imagelayer = new ImageLayer({}).source(
        url,
        {
            parser: {
                type: 'image',
                extent: [360, 400, 640, 600]
            }
        }
    );

    imagelayer.on('click', e => {
        // console.log(e)
        let { lng, lat } = e.lngLat
        popup = new Popup({
            offsets: [0, 0],
            closeButton: false
        })
            .setLnglat(e.lngLat)
            .setHTML(`<button class="el-button el-button--primary" onclick="add_popup(${lng},${lat})" >选择位置</button>`);
        scene.addPopup(popup);
    });

    scene.on('loaded', () => {
        // fetch('https://gw.alipayobjects.com/os/bmw-prod/7dc0d454-fabc-4461-a5d5-d404dadb49a9.json')
        //     .then(res => res.json())
        //     .then(data => {
        //         const textlayer = new PointLayer({ zIndex: 2 })
        //             .source(
        //                 data,
        //                 {
        //                     parser: {
        //                         type: 'json',
        //                         x: 'x',
        //                         y: 'y'
        //                     }
        //                 }
        //             )
        //             .shape('t', 'text')
        //             .size(12)
        //             .active({
        //                 color: '#00f',
        //                 mix: 0.9
        //             })
        //             .color('rgb(86, 156, 214)')
        //             .style({
        //                 textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
        //                 spacing: 2, // 字符间距
        //                 fontWeight: '800',
        //                 padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
        //                 stroke: '#ffffff', // 描边颜色
        //                 strokeWidth: 2, // 描边宽度
        //                 textAllowOverlap: true
        //             });
        //         scene.addLayer(textlayer);
        //     });

        getList()
        scene.addLayer(imagelayer);

    });
})

const getList = async () => {
    var res = await axios.get("/adminapi/lab")
    var list = res.data.map(item => ({
        x: item.x,
        y: item.y,
        t: item.title
    }))
    addTextLayer(list)
}

//添加
const dialogVisible = ref(false)
const addFormRef = ref()
const addForm = reactive({
    title: "",
    capacity: "",
    labType: "",
    collegeType: "",
    x: 0,
    y: 0
})
const rules = reactive({
    title: [
        { required: true, message: '请输入实验室名称', trigger: 'blur' },
    ],
    capacity: [
        { required: true, message: '请输入容纳人数', trigger: 'blur' },
    ],
    labType: [
        { required: true, message: '请选择实验室类型', trigger: 'blur' },
    ],
    collegeType: [
        { required: true, message: '请选择学院', trigger: 'blur' },
    ],
})



window.add_popup = (x, y) => {
    dialogVisible.value = true;

    // 将pop隐藏
    console.log(popup)
    popup.close();

    // x,y
    addForm.x = 500 + 2.8 * x
    addForm.y = 500 + 2.8 * y
}

const handleAddConfirm = () => {
    addFormRef.value.validate(async (valid) => {
        if (valid) {
            // console.log(addForm)
            dialogVisible.value = false;
            var res = await axios.post(`/adminapi/lab`, addForm)
            if (res.data.code === 0) {
                ElMessage({
                    message: '执行成功',
                    type: 'success',
                })
                addTextLayer([
                    {
                        "x": addForm.x,
                        "y": addForm.y,
                        "t": addForm.title
                    }
                ])
            } else {
                ElMessage.error(res.data.msg)
            }
        } else {
            console.log(valid)
        }
    })
}

const addTextLayer = (data) => {
    const textlayer = new PointLayer({ zIndex: 2 })
        .source(
            data,
            {
                parser: {
                    type: 'json',
                    x: 'x',
                    y: 'y'
                }
            }
        )
        .shape('t', 'text')
        .size(14)
        .active({
            color: '#00f',
            mix: 0.9
        })
        .color('rgb(13, 71, 161)')
        .style({
            textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
            spacing: 2, // 字符间距
            fontWeight: '800',
            padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
            stroke: '#ffffff', // 描边颜色
            strokeWidth: 2, // 描边宽度
            textAllowOverlap: true
        });
    scene.addLayer(textlayer);
}

</script>